<template>
  <div class="authority-box">
    <div class="justify-between align-center authority-title">
      <span class="mok-btn">模块功能</span>
      <span class="submit-btn" @click="handleSubmit">保存</span>
    </div>
    <div style="text-align: left">
      <div class="all">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全部</el-checkbox>
      </div>
      <el-tree class="filter-tree" :data="menuList" :props="treeProps" :default-expand-all="false"
        :default-checked-keys="defaultChecked" @check="treeCheckChange" ref="tree" node-key="id"
        :expand-on-click-node="false" accordion show-checkbox></el-tree>

    </div>
  </div>
</template>

<script>
import { getAuthList, roleBindMenu } from "@/api/auth";

export default {
  props: {
    roleId: {
      type: Number,
      default: 0,
    },
    modeType: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      defaultChecked: [],
      menuList: [],
      treeProps: {
        children: "children",
        label: "name",
      },
      isIndeterminate: true,
      checkAll: false,
    };
  },

  mounted() {
    this.getAuthLists();
  },

  methods: {
    //角色绑定菜单
    async roleBindMenus(menuIds) {
      let res = await roleBindMenu({
        roleId: this.roleId,
        menuIds: menuIds,
      });
      if (res.code == 200) {
        this.$message({
          message: "绑定成功",
          type: "success",
        });
      }
    },
    handleSubmit() {
      let checkedNodes = this.$refs.tree.getCheckedNodes(true);
      let menuArr = [];
      checkedNodes.forEach((item) => {
        menuArr.push(item.id);
      });
      if (menuArr.length == 0) {
        this.$message({
          message: "请选择菜单",
          type: "error",
        });
        return;
      }
      let menuIds = Array.from(new Set(menuArr));
      if (this.modeType == 1) {
        this.roleBindMenus(menuIds.join(","));
        this.$emit("onClose", { isClose: true });
      } else {
        this.$emit("onClose", { menuIds: menuIds });
      }
    },
    //菜单列表
    async getAuthLists() {
      this.defaultChecked = []
      let res = await getAuthList({
        roleId: this.roleId,
      });

      if (res.code == 200) {
        this.menuList = res.data;
        console.log(4444, res.data);
        this.menuList.forEach((item) => {
          if (item.checked === 1) {
            this.defaultChecked.push(item.id)
          }
        })
        // for (let i = 0  ; i < res.length; i++){
        //   console.log("RRR",this.menuList[i])
        //   if (this.menuList[i].checked === 1){
        //     this.defaultChecked.push(this.menuList[i].id)
        //   }
        // }
      }
    },
    handleCheckAllChange(val) {
    if (val) {
      this.menuList.forEach((item) => {
        this.$refs.tree.setChecked(item.id, true);
        })
    }else{
      this.menuList.forEach((item) => {
        this.$refs.tree.setChecked(item.id, false);
        })
    }
      this.isIndeterminate = false;
    },
    treeCheckChange(data, checkedNodes) {
      console.log(data, checkedNodes);
      this.checkAll = checkedNodes.checkedKeys.length === this.menuList.length;
      this.isIndeterminate = checkedNodes.checkedKeys.length > 0 && checkedNodes.checkedKeys.length < this.menuList.length;
    }
  },
};
</script>

<style lang="scss" scoped>
.authority-box {
  width: 100%;
  height: 100%;

  .authority-title {
    margin-bottom: 24px;

    span {
      display: inline-block;
      border-radius: 4px;
      cursor: pointer;
    }

    .mok-btn {
      padding: 7px 16px;
      background: #363940;
      color: #fff;
    }

    .submit-btn {
      background: #5cfbff;
      color: #17181a;
      padding: 7px 30px;
    }
  }
}
</style>

<style>
.el-tree {
  background: transparent !important;
  color: #fff;
  margin-top: 24px;
}

.el-button--text {
  color: #5cfbff;
  font-size: 14px;
}

.el-tree-node:focus>.el-tree-node__content {
  background-color: #363940 !important;
}

.el-tree-node__content:hover {
  background-color: #363940;
}

.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #363940;
}
</style>